<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>Agency - Responsive Flat Admin Dashboard</title>
    <meta content="Admin Dashboard" name="description"/>
    <meta content="ThemeDesign" name="author"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <link rel="shortcut icon" href="${basePath}/admin/assets/images/faviicon.png">

    <link href="${basePath}/admin/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="${basePath}/admin/assets/css/icons.css" rel="stylesheet" type="text/css">
    <link href="${basePath}/admin/assets/css/style.css" rel="stylesheet" type="text/css">
    <style>
        .page-content-wrapper a {
            /* text-decoration: none; */
            color: #fff;
        }

        .pagination a {
            color: skyblue;
        }

        .pagination ul {
            margin: 0px auto;
        }
    </style>
</head>


<body class="fixed-left">

<!-- Loader -->
<div id="preloader">
    <div id="status">
        <div class="spinner"></div>
    </div>
</div>

<!-- Begin page -->
<div id="wrapper">

    <!-- ========== Left Sidebar Start ========== -->
    <div class="left side-menu">
        <button type="button" class="button-menu-mobile button-menu-mobile-topbar open-left waves-effect">
            <i class="ion-close"></i>
        </button>

        <!-- LOGO -->
        <div class="topbar-left">
            <div class="text-center">
                <!--<a href="index.html" class="logo">Admiry</a>-->
                <!-- <a href="index.html" class="logo"><img src="${basePath}/admin/assets/images/logo.png" height="24" alt="logo"></a> -->
                <a href="index.html" class="logo">后台管理</a>
            </div>
        </div>

        <div class="sidebar-inner slimscrollleft">

            <!-- <div class="user-details">
                <div class="text-center">
                    <img src="${basePath}/admin/assets/images/users/avatar-6.jpg" alt="" class="rounded-circle">
                </div>
                <div class="user-info">
                        <h4 class="font-16 text-white">Elena Retson</h4>
                        <span class="text-white"><i class="fa fa-dot-circle-o text-success"></i> Online</span>
                </div>
            </div> -->

            <div id="sidebar-menu">
                <ul>
                    <!-- <li class="menu-title text-white">General</li> -->

                        <li>
                            <a href="/admin/index" class="waves-effect">
                                <i class="ti-home"></i>
                                <span> 管理员管理 </span>
                            </a>
                        </li>
                        <li>
                            <a href="/category/admin/articleCategory" class="waves-effect">
                                <i class="ti-home"></i>
                                <span> 文章分类管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="/article/admin/index" class="waves-effect">
                                <i class="ti-home"></i>
                                <span> 文章管理 </span>
                            </a>
                        </li>
                        <li>
                            <a href="/user/admin/index" class="waves-effect">
                                <i class="ti-home"></i>
                                <span> 用户管理 </span>
                            </a>
                        </li>
                        <li>
                            <a href="/comments/admin/index" class="waves-effect">
                                <i class="ti-home"></i>
                                <span> 评论管理 </span>
                            </a>
                        </li>
                        <li>
                            <a href="/message/admin/index" class="waves-effect">
                                <i class="ti-home"></i>
                                <span> 留言管理 </span>
                            </a>
                        </li>


                </ul>
            </div>
            <div class="clearfix"></div>
        </div> <!-- end sidebarinner -->
    </div>
    <!-- Left Sidebar End -->

    <!-- Start right Content here -->

    <div class="content-page">
        <!-- Start content -->
        <div class="content">

            <!-- Top Bar Start -->
            <div class="topbar">

                <nav class="navbar-custom">

                    <ul class="list-inline float-right mb-0">
                        <li class="list-inline-item dropdown notification-list">
                            <a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#"
                               role="button"
                               aria-haspopup="false" aria-expanded="false">
                                <i class="mdi mdi-email-outline noti-icon"></i>
                                <span class="badge badge-danger noti-icon-badge">5</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-menu-lg">
                                <!-- item-->
                                <div class="dropdown-item noti-title">
                                    <h5><span class="badge badge-danger float-right">745</span>Messages</h5>
                                </div>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon"><img src="${basePath}/admin/assets/images/users/avatar-2.jpg" alt="user-img"
                                                                  class="img-fluid rounded-circle"/></div>
                                    <p class="notify-details"><b>Charles M. Jones</b><small class="text-muted">Dummy
                                        text of the printing and typesetting industry.</small></p>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon"><img src="${basePath}/admin/assets/images/users/avatar-3.jpg" alt="user-img"
                                                                  class="img-fluid rounded-circle"/></div>
                                    <p class="notify-details"><b>Thomas J. Mimms</b><small class="text-muted">You have
                                        87 unread messages</small></p>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon"><img src="${basePath}/admin/assets/images/users/avatar-4.jpg" alt="user-img"
                                                                  class="img-fluid rounded-circle"/></div>
                                    <p class="notify-details"><b>Luis M. Konrad</b><small class="text-muted">It is a
                                        long established fact that a reader will</small></p>
                                </a>

                                <!-- All-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    View All
                                </a>

                            </div>
                        </li>

                        <li class="list-inline-item dropdown notification-list">
                            <a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#"
                               role="button"
                               aria-haspopup="false" aria-expanded="false">
                                <i class="mdi mdi-bell-outline noti-icon"></i>
                                <span class="badge badge-success noti-icon-badge">3</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-menu-lg">
                                <!-- item-->
                                <div class="dropdown-item noti-title">
                                    <h5><span class="badge badge-danger float-right">87</span>Notification</h5>
                                </div>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon bg-primary"><i class="mdi mdi-cart-outline"></i></div>
                                    <p class="notify-details"><b>Your order is placed</b><small class="text-muted">Dummy
                                        text of the printing and typesetting industry.</small></p>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon bg-success"><i class="mdi mdi-message"></i></div>
                                    <p class="notify-details"><b>New Message received</b><small class="text-muted">You
                                        have 87 unread messages</small></p>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon bg-warning"><i class="mdi mdi-martini"></i></div>
                                    <p class="notify-details"><b>Your item is shipped</b><small class="text-muted">It is
                                        a long established fact that a reader will</small></p>
                                </a>

                                <!-- All-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    View All
                                </a>

                            </div>
                        </li>

                        <li class="list-inline-item dropdown notification-list">
                            <a class="nav-link dropdown-toggle arrow-none waves-effect nav-user" data-toggle="dropdown"
                               href="#" role="button"
                               aria-haspopup="false" aria-expanded="false">
                                <img src="${basePath}/admin/assets/images/users/user-5.jpg" alt="user" class="rounded-circle">
                            </a>
                            <div class="dropdown-menu dropdown-menu-right profile-dropdown ">
                                <a class="dropdown-item" href="#"><i
                                        class="mdi mdi-account-circle m-r-5 text-muted"></i> Profile</a>
                                <a class="dropdown-item" href="#"><span
                                        class="badge badge-success pull-right">5</span><i
                                        class="mdi mdi-settings m-r-5 text-muted"></i> Settings</a>
                                <a class="dropdown-item" href="#"><i
                                        class="mdi mdi-lock-open-outline m-r-5 text-muted"></i> Lock screen</a>
                                <a class="dropdown-item" href="#"><i class="mdi mdi-logout m-r-5 text-muted"></i> Logout</a>
                            </div>
                        </li>

                    </ul>

                    <ul class="list-inline menu-left mb-0">
                        <li class="list-inline-item">
                            <button type="button" class="button-menu-mobile open-left waves-effect">
                                <i class="ion-navicon"></i>
                            </button>
                        </li>
                        <li class="hide-phone list-inline-item app-search">
                            <h3 class="page-title">Tables</h3>
                        </li>
                    </ul>

                    <div class="clearfix"></div>

                </nav>

            </div>
            <!-- Top Bar End -->

            <div class="page-content-wrapper ">

                <div class="container-fluid">


                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card m-b-30">
                                <div class="card-body">

                                    <h4 class="mt-0 header-title">文章分类</h4>
                                    <!-- <p class="text-muted m-b-30 font-14">
                                        Use <code>.table-striped</code> to add zebra-striping to any table row
                                        within the <code>&lt;tbody&gt;</code>.
                                    </p> -->
                                    <form action="/category/search" method="post">
                                    <div class="col-sm-12 form-inline" style="margin-bottom:20px;">
                                        <input class="form-control col-sm-2" type="text" placeholder="分类编号" name="categoryId">&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input class="form-control col-sm-2" type="text" placeholder="分类名称" name="categoryName">&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input class="form-control col-sm-2" type="text" placeholder="分类描述" name="categoryInfo">&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input class="form-control col-sm-2" type="text" placeholder="上级类别" name="categoryParentName">&nbsp;&nbsp;&nbsp;&nbsp;
                                        <button type="submit" class="btn btn-primary waves-effect waves-light">搜索
                                        </button>
                                        <button type="reset" class="btn btn-outline-success waves-effect waves-light">重置</button>
                                    </div>
                                    </form>
                                    <table class="table table-striped">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>文章类别</th>
                                            <th>类别说明</th>
                                            <th>上级分类</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <c:forEach items="${list}" var="category">
                                            <tr>
                                                <th scope="row">${category.categoryId}</th>
                                                <td>${category.categoryName}</td>
                                                <td>${category.categoryInfo}</td>
                                                <td>${category.categoryParentName}</td>
                                                <td style="width:20%">
                                                    <button type="button"
                                                            class="btn btn-primary waves-effect waves-light"><a
                                                            href="${basePath}/category/toChange/${category.categoryId}">修改</a>
                                                    </button>
                                                    <button type="button"
                                                            class="btn btn-danger waves-effect waves-light"><a href="${basePath}/category/delete/${category.categoryId}">删除</a>
                                                    </button>
                                                    <!-- <button type="button" class="btn btn-primary waves-effect waves-light">删除</button> -->
                                                </td>
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                    <div class="col-sm-12 col-md-7">
                                        <div class="dataTables_paginate paging_simple_numbers"
                                             id="datatable-buttons_paginate">
                                            <ul class="pagination">
                                                <li class="paginate_button page-item previous disabled"
                                                    id="datatable-buttons_previous">
                                                    <a href="#" aria-controls="datatable-buttons" data-dt-idx="0"
                                                       tabindex="0" class="page-link">Previous</a>
                                                </li>
                                                <li class="paginate_button page-item active">
                                                    <a href="#" aria-controls="datatable-buttons" data-dt-idx="1"
                                                       tabindex="0" class="page-link">1</a>
                                                </li>
                                                <li class="paginate_button page-item ">
                                                    <a href="#" aria-controls="datatable-buttons" data-dt-idx="2"
                                                       tabindex="0" class="page-link">2</a>
                                                </li>
                                                <li class="paginate_button page-item ">
                                                    <a href="#" aria-controls="datatable-buttons" data-dt-idx="3"
                                                       tabindex="0" class="page-link">3</a>
                                                </li>
                                                <li class="paginate_button page-item ">
                                                    <a href="#" aria-controls="datatable-buttons" data-dt-idx="4"
                                                       tabindex="0" class="page-link">4</a>
                                                </li>
                                                <li class="paginate_button page-item next" id="datatable-buttons_next">
                                                    <a href="#" aria-controls="datatable-buttons" data-dt-idx="5"
                                                       tabindex="0" class="page-link">Next</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end col -->
                    </div> <!-- end row -->

                </div><!-- container -->


            </div> <!-- Page content Wrapper -->

        </div> <!-- content -->

        <footer class="footer">
            © 2018 Upcube - Crafted with <i class="mdi mdi-heart text-danger"></i> by Themesdesign.
        </footer>

    </div>
    <!-- End Right content here -->

</div>
<!-- END wrapper -->


<!-- jQuery  -->
<script src="${basePath}/admin/assets/js/jquery.min.js"></script>
<script src="${basePath}/admin/assets/js/popper.min.js"></script>
<script src="${basePath}/admin/assets/js/bootstrap.min.js"></script>
<script src="${basePath}/admin/assets/js/modernizr.min.js"></script>
<script src="${basePath}/admin/assets/js/detect.js"></script>
<script src="${basePath}/admin/assets/js/fastclick.js"></script>
<script src="${basePath}/admin/assets/js/jquery.slimscroll.js"></script>
<script src="${basePath}/admin/assets/js/jquery.blockUI.js"></script>
<script src="${basePath}/admin/assets/js/waves.js"></script>
<script src="${basePath}/admin/assets/js/jquery.nicescroll.js"></script>
<script src="${basePath}/admin/assets/js/jquery.scrollTo.min.js"></script>


<!-- App js -->
<script src="${basePath}/admin/assets/js/app.js"></script>

</body>
</html>
